<template>
    <div>
        <el-card>
            <h3>用户上传</h3>
        </el-card>
        <el-card>
            <div>
                <el-form :inline="true" :model="Upline">
                    <el-form-item label="上传用户:">
                        <el-input v-model="Upline.UpUser" placeholder="用户ID/账号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文件名:">
                        <el-input v-model="Upline.FileName" placeholder="用户ID/账号" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="QueryFile()">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="Resetting">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="FileUploads">文件上传</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="TemplateList.records" style="width: 100%">
                <el-table-column prop="createDate" label="日期">
                </el-table-column>
                <el-table-column prop="username" label="账号">
                </el-table-column>
                <el-table-column prop="modelKey" label="模型标识key">
                </el-table-column>
                <el-table-column prop="taskId" label="taskId">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-download" plain @click="DownFile(scope.row)"
                            size="mini">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="TemplateList.total" style="margin: 20px 0;float: right;">
            </el-pagination>


            <!-- 文件上传 -->

            <el-dialog title="文件上传" :visible.sync="UpFileDialog" width="420px">
                <div>

                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="ModelKey">
                            <el-select filterable clearable 
                                v-model="formInline.RechargeType" >
                                <el-option v-for="item in modelKey" :key="item.modelKey" :label="item.modelKey"
                                    :value="item.modelKey">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="文件">
                            <el-upload class="upload-demo" drag ref="uploadKUser" :http-request="onUploadKUser"
                                action="" :on-preview="handlePreviewKUser" :on-remove="handleRemoveKUser"
                                :file-list="fileListKUser" :on-change="handleFileChange" :on-success="uploadSuccess"
                                :multiple="true" :auto-upload="false" accept="" :limit="50" :on-exceed="OnExceedKUser">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            </el-upload>
                        </el-form-item>
                    </el-form>



                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="CancelFiles">取消上传</el-button>
                    <el-button type="primary" @click="Determine">确定上传</el-button>
                </span>
            </el-dialog>

            <!-- 文还上传 -->
        </el-card>
    </div>
</template>

<script>
import { UserUploadfile, UpUserFiles, QueryModelkey } from '@/api/table'
import request from '../../../../vue.config'

export default {
    data() {
        return {
            TemplateList: [],
            UpFileDialog: false,
            Upline: {
                UpUser: '',
                FileName: ''
            },
            formInline:{
                RechargeType:""
            },
            pageCode: 1,
            pageSize: 10,
            fileListKUser: [],
            pageCode: 1,
            pageSize: 10,
            CsvRole: '',
            timestamp: '',
            RequestUrl: '',
            modelKey: []
        };
    },
    created() {
        this.QueryFile()
        console.log(this.timestamp, "wenjain")
        this.CsvRole = localStorage.getItem('CsvRole');
        this.RequestUrl = request.devServer.proxy["/api"].target
        this.QueryModel()
    },
    methods: {
        async QueryModel() {
            QueryModelkey().then(res => {
                this.modelKey = res.data
                console.log(this.modelKey, "wenjain")
            })
        },
        DownFile(row) {
            // localhost:8081/datac/business/file/download?taskId=20240712f97292a7140747e78200cc2e
            const DownUrl = this.RequestUrl + `/datac/business/file/download?taskId=${row.taskId}`
            window.open(DownUrl, '_blank')
        },

        // 查询文件
        async QueryFile() {
            UserUploadfile(this.pageCode, this.pageSize).then(res => {
                this.TemplateList = res.data
            })
        },

        // 清空每一项的值
        clearObject(obj) {
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    obj[key] = '';
                }
            }
        },


        // 文件上传
        FileUploads() {
            this.UpFileDialog = true;
        },

        async onUploadKUser(file) {
            // let taskId = this.CsvRole + `_` + this.timestamp;
            const formData = new FormData()
            formData.append("file", file.file);
            formData.append("modelKey", this.formInline.RechargeType);
            let UpFiles = await UpUserFiles(formData);

            // console.log(formData,"wenjain1")
        },
        // 确定上传
        Determine() {
            this.$refs.uploadKUser.submit();
            this.UpFileDialog = false;

        },
        // 取消上传清空文件
        CancelFiles() {
            this.UpFileDialog = false;
            this.$refs.uploadKUser.clearFiles();
        },
        // 点击文件列表中已上传的文件时的钩子
        handlePreviewKUser(file) {
            console.log(file, "1");
        },
        // 	文件列表移除文件时的钩子
        handleRemoveKUser(file, fileList) {
            console.log(file, fileList, "文件列表移除文件时的钩子");
            // const arr = []
            // for (let i = 0; i < this.fileListKUser.length; i++) {
            //     if (this.fileListKUser[i].uid !== file.uid) {
            //         arr.push(this.fileListKUser[i])
            //     }
            // }
            // this.fileListKUser = arr
            // console.log(this.fileListKUser, "this.fileListKUser")
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        handleFileChange(file, fileList) {
            // this.fileListKUser = fileList
            console.log(file, fileList, "this.fileListKUser")
            // this.fileListKUser.push(file)
            // const arr1 = this.fileListKUser.concat(fileList);
            // console.log(this.fileListKUser, "this.fileListKUser")
            // this.fileListKUser = arr1
            // this.fileListKUser.push(...fileList);

        },
        // 上传成功
        uploadSuccess(response, file, fileList) {
            console.log('上传成功')
        },
        OnExceedKUser() {
            this.$message({
                message: "文件上传超出限制",
                type: 'error'
            });
        },


        // 重置
        Resetting() {
            this.clearObject(this.Upline)
        },
        // 分页
        async handleSizeChange(val) {
            this.pageSize = val;
        },
        async handleCurrentChange(val) {
            this.pageCode = val;

        },

        async handleSizeChange(val) {
            this.pageSize = val;
            this.QueryFile()
        },
        async handleCurrentChange(val) {
            this.pageCode = val;
            this.QueryFile()

        },
    },
};
</script>

<style lang="scss" scoped></style>